<template>
	<body class="rank-body">
		<h3 class="column-heading">积分排行帮</h3>
		<table class="rank-table" border="5" cellspacing="0" cellpadding="0">		
				<tr  class="th">
					<th>排名</th>
					<th align="left" style="text-indent: 4em;">球队名称</th>
					<th>场次</th>
					<th>胜</th>
					<th>平</th>
					<th>负</th>
					<th>积分</th>
				</tr>
			
				<tr @click="goto('TeamDetails',{id:item.teamId,name:item.teamName})" v-for="(item,index) in nowTeamPageInfo">
						<td>
							<img v-if="item.rank==1" src="../assets/jinpai.png"/>
							<img v-if="item.rank==2" src="../assets/yinpai.png"/>
							<img v-if="item.rank==3" src="../assets/tongpai.png"/>
							<span v-if="item.rank>3">{{item.rank}}</span>
						</td>
						<td><img :src="item.icon||initImg"/>{{item.teamName||'队伍名字'}}</td>
						<td>{{item.times}}</td>
						<td>{{item.victory}}</td>
						<td>{{item.draw}}</td>
						<td>{{item.lose}}</td>
						<td>{{item.integral}}</td>
						
				</tr>
		</table>
		<el-pagination
			class="mgTop-20"
  			background
			layout="total,prev, pager, next,jumper"
		  	:total="teamRank.length"
		  	:page-size="sum"
		  	@current-change="choseTeamPage">
		</el-pagination>
		<h3 class="column-heading">射手排行帮</h3>
		<table class="rank-table" border="5" cellspacing="0" cellpadding="0">
			<tr  class="th">
				<th>排名</th>
				<th align="left" style="text-indent: 3em;">球员姓名</th>
				<th align="left" style="text-indent: 3em;">所属球队</th>
				<th>球衣号</th>
				<th>位置</th>
				<th>跑动距离</th>
				<th>红牌</th>
				<th>黄牌</th>
				<th>进球</th>
				<th>积分</th>
				

				
			</tr>
		
			<tr @click="goto('PlayerDetails',{id:item.userId,name:item.studentName})" v-for="(item,index) in nowPlayerPageInfo">
				<td>
					<img v-if="item.rank==1" src="../assets/jinpai.png"/>
					<img v-if="item.rank==2" src="../assets/yinpai.png"/>
					<img v-if="item.rank==3" src="../assets/tongpai.png"/>
					<span v-if="item.rank>3">{{item.rank}}</span>
				</td>
				<td><img :src="item.playerIcon||initImg" /> {{item.studentName||'球员姓名'}}</td>
				<td style="text-align: left;"><img :src="item.teamIcon||initImg"/>{{item.teamName||'所属球队'}}</td>
				
				<td>{{item.cloth||'球衣号码'}}</td>
				<td>{{item.position||'场上站位'}}</td>
				<td>{{item.distance||'跑动距离'}}</td>
				<td>{{item.redCard||'红牌数'}}</td>
				<td>{{item.yellowCard||'黄牌数'}}</td>
				<td>{{item.goals||'进球数'}}</td>
				<td>{{item.score||'积分'}}</td>
				
				
			</tr>
		</table>
		<el-pagination
			class="mgTop-20"
  			background
			layout="total,prev, pager, next,jumper"
		  	:total="playerRank.length"
		  	:page-size="sum"
		  	@current-change="chosePlayerPage">
		</el-pagination>
	</body>
</template>

<script>
	export default{
		name:'RankingList',
		props:['comId'],
		data(){return{
			dataUrl:'http://101.37.33.145:3100/weixin/getRankView.do',
//			leagueId:'a1206801-bb2a-48bf-8b26-0d6e7d3ae6a0',
			playerRank:[],
			teamRank:[],
			teamPageNum:0,
			playerPageNum:0,
			sum:10//每个分页显示条数
		}},
		created:function(){
			this.getData();
			this.choseTeamPage(1);
			this.chosePlayerPage(1);
		},
		mounted:function(){
			sessionStorage.navActive='RankingList';
			
		},
		computed:{
			nowTeamPageInfo(){
				return this.teamRank.slice(this.teamPageNum*this.sum,this.teamPageNum*this.sum+this.sum );
			},
			nowPlayerPageInfo(){
				return this.playerRank.slice(this.playerPageNum*this.sum,this.playerPageNum*this.sum+this.sum );
			}
		},
		methods:{
			getData:function(){
				this.$axios.post(
					this.dataUrl,
					{
						leagueId:this.comId
					}
				).then(
					res=>{
						this.playerRank=res.data.player;
						this.teamRank=res.data.team;
						console.log('排行榜页的请求成功了');
					}
				).catch(
					err=>console.log(err,'排行榜页的请求失败了')
				)
			},
			goto(str,obj){
				this.$router.push({name:str,params:{id:obj.id,name:obj.name} })
			},
			choseTeamPage(v){
				this.teamPageNum=Number(v)-1
			},
			chosePlayerPage(v){
				
				this.playerPageNum=Number(v)-1
			}
		}
	}
</script>

<style scoped="scoped">
	.mgTop-20{
		padding: 0;
		margin-top: 20px;
	}
	
	.rank-body{	box-sizing: border-box;
			padding: 0px;
			margin: 0px auto;
			width: 100%;
			height: auto;
			overflow: hidden;
			}
			table img{
				width: 28px;
				margin:0px 5px;
				vertical-align: middle;			
			}
			table{
				box-sizing: border-box;
				width: 100%;	
				height: auto;
				border-collapse: collapse;
				margin-bottom: 30px;		
			}
			table,th,td,tr{
				padding: 0;
				margin: 0;
				outline: none;
				border: none;
				vertical-align: middle;
				
			}
			tr{
			
				width: 100%;
				height: 50px;
				padding-right: 20px;
				text-align: center;
				border:2px solid #DCDCDC ;
				border-top:none ;
				
			}
			tr:nth-of-type(2n+1):not(:nth-of-type(1)){
				background-color: #F2F2F2;
			}
			td{

				box-sizing: border-box;
				height: 50px;
				padding:1% 1% ;
			}
			.th{
				height: 35px;
				color: white;
				background-color: #4B9CA0;
			}
			tr td:first-of-type{
				width: 8%;
				text-align: center;
				color: #009999;
			}
			.rank-table td:nth-of-type(2){
				
				text-align: left;
			}
		.column-heading{
			position: relative;
			box-sizing: border-box;
			width: 100%;
			height: 42px;
			line-height: 42px;
			margin-bottom: 20px;
			margin-top: 30px;
			overflow: hidden;
			text-indent: 1em;
			font-weight: 400;
			font-size: 16px;
			border-bottom:5px solid #77c2c3;
			border-top-left-radius: 5px;
		}
		.column-heading:before{
			content: "";
			position: absolute;
			z-index:-1;
			top: 0px;
			left: -1em;
			width: 150px;
			height: 42px;
			background-color: #77C2C3;
			border-top-right-radius: 10px;
			border-top-left-radius: 10px;
		}
		.column-heading:after{
			content: '';
			position:absolute ;
			top: 4px;
			left: calc(150px - 18px );
			border-left:35px solid  #77C2C3;
			border-top:38px solid transparent;
			/*border-right:34px solid aquamarine;*/
		}
</style>